<template>
  <div>
      <!-- 在vue中你想要获取元素，你可以在元素上写一个ref属性给上名字，就跟id一样，然后就会被放在组件实例上面 -->
    <h1 v-text="msg" ref="myMsg"></h1>
    <button @click='showDom'>点击我输出上方的DOM元素</button>
    <School ref='mySchool'></School>
  </div>
</template>

<script>
import School from "./components/School.vue";
export default {
  name: "App",
  components: {
    School,
  },
  data() {
    return {
      msg: "欢迎学习Vue",
    };
  },
  methods:{
      showDom(){
        //   这里成功获取到了元素
          console.log(this.$refs.myMsg)

        //   组件则可以获取组件实例对象
        console.log(this.$refs.mySchool)

        // 你如果用id找到组件，只能得到它的元素结构，不能获得它的组件实例对象

        // ref的作用
        // 1.被用来给元素或者子组件注册引用信息（id的替代者）
        // 2.应用在html上获取真实dom与那苏，组件上获取实例对象
      }
  }
};
</script>


<style>
</style>